<template>
  <div class="register-wrapper">
    <el-form class="form" :model="user" ref="registerForm">
      <h1 style="margin-top: 50px;color: #409eff">用户注册</h1>
      <div class="login">
        <el-form-item prop="username"> 
          <el-input
            v-model="user.username"
            placeholder="请输入用户名"
            clearable
            @blur="name"
          />
          <label>{{ nameHint }}</label>
        </el-form-item>
        <el-form-item prop="userpwd" class="pwd">
          <el-input
            v-model="user.userpwd"
            placeholder="请输入长度为6~12位密码"
            clearable
            @blur="pwd"
            show-password
          />
          <label>{{ pwdHint }}</label>
        </el-form-item>
        <div class="secpwd">
          <el-input
            v-model="conPwd"
            placeholder="再次输入密码"
            clearable
            @input="confirmPwd()"
            show-password
          />
          <label>{{ secondPwd }}</label>
        </div>
        <el-form-item prop="userphone" class="phone">
          <el-input
            v-model="user.userphone"
            placeholder="输入手机号"
            clearable
            @input="verifyPhone"
          />
          <label>{{ phoneHint }}</label>
        </el-form-item>
        <div>
          <el-button type="success" @click="registerFunction" class="btn-login">
            注册
          </el-button>
        </div>
        <div class="suggest">
          已有账号，立即
          <span @click="goLogin">登录</span>
        </div>
       <div class="others">
          <h5>其他方式</h5>
          <div class="others-methods">
           <img src="../assets/QQ.png" />
            <img src="../assets/微信.png" />
            <img src="../assets/支付宝.png" />
          </div>
        </div>
		   </div>
      </el-form>
 
	</div>
</template>

<script setup lang="ts">
	import { ElMessage } from "element-plus";

import { onMounted, ref } from "vue";
import {register} from "@/api/user"
import router from '@/router'


// const usersStore = userInfoStore();
  const user = ref({
      username: '',
      userpwd: '',
      userphone: ''
    });
	const conPwd = ref("");
// 错误提示
const nameHint = ref("");
const pwdHint = ref("");
const secondPwd = ref("");
const phoneHint = ref("");
const goLogin = () => {
  router.push("/login");
};

const name = () => {
  if (user.value.username=== "") {
    nameHint.value = "用户名不能为空";
  } else {
	console.log('username验证',user.value.username)
    nameHint.value = "";
  }
};

const pwd = () => {
	
  const pwdLength = /^.{6,12}$/;
  if (user.value.userpwd === "") {
    pwdHint.value = "密码不能为空";
  } else if (user.value.userpwd !== "") {
    if (!pwdLength.test(user.value.userpwd)) {
      pwdHint.value = "密码长度为6~12位";
    } else {
	  console.log('pwd验证',user.value.userpwd)
      pwdHint.value = "";
    }
  }
};
const confirmPwd = () => {
  if (conPwd.value === "") {
    secondPwd.value = "验证密码不能为空";
  } else {
    if (user.value.userpwd!== conPwd.value) {
		console.log(conPwd.value)
      secondPwd.value = "两次密码不相同";
    } else {
      secondPwd.value = "";
    }
  }
};


const verifyPhone = () => {
  const phone = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
  if (user.value.userphone === "") {
    phoneHint.value = "手机号码不能为空";
  } else if (user.value.userphone !== "") {
    if (!phone.test(user.value.userphone)) {
      phoneHint.value = "手机号码格式不正确";
    } else {
      phoneHint.value = "";
    }
  }
};

function registerFunction(){
  name();
  pwd();
  confirmPwd();
  verifyPhone();
  	console.log("注册============")
				// const userId= this.user.username;
				// const password = this.user.password
				// console.log("pass",password)
				// console.log("id",userId)
				// console.log("data===",this.user)
				register(user).then((res) => {		
				console.log("注册res============",res.data)
				if(res.data=='注册成功'){
					
					router.push("/login");
				    ElMessage.success(res.data);
				}else{
				    ElMessage.error(res.data);
				}
			})
		

};
</script>

<style lang="less">
.register-wrapper {
  padding: 25px 0px;
  .form {
    width: 500px;
    background-color: #ffffff;
    box-shadow: 3px 3px 30px #c0c0c0;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    padding: 30px 10px;
    min-height: 700px;
  }
  h1 {
    text-align: center;
    margin: 10px 0;
  }
  .login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & > div {
      margin: 12px 0;
    }
    .el-input {
      width: 330px;
      height: 48px;
      .el-input__suffix {
        .el-icon {
          font-size: 18px;
        }
      }
    }
  }
  .login label {
    display: block;
    font-size: 12px;
    color: #ff2e3b;
    position: absolute;
  }
  .btn-login {
    width: 330px;
    height: 50px;
    border: none;
    margin-top: 10px;
    font-size: 22px;
  }
  .suggest {
    font-size: 18px;
    margin: 10px 0;
    color: #8f8c8c;
    span {
      cursor: pointer;
      color: rgb(22, 95, 252);
    }
  }
  .others {
    margin-top: 10px;
    color: #8d8d8d;
    text-align: center;
  }
  .others-methods img {
    width: 45px;
    height: 45px;
    margin: 15px 20px;
    cursor: pointer;
  }
}
</style>